<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <script src="/static/js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#btnAjax").click(function () {
                username = $("#username").val();
                password = $("#password").val();
                $.ajax({
                    "url": "/login_ajax_check",
                    "dataType": "json",
                    "type": "post",
                    "data": {"username": username, "password": password}
                }).success(function (data) {
                    if (data.res === 1) {
                        location.href = "/index"
                    } else {
                        $("#message").show().html("密码错误")
                    }
                })
            })

        })





    </script>
    <style>
        #message {
            display: none;
            color: red;
        }





    </style>
</head>
<body>
<div>
    <form method="post" action="/login/">
        {% csrf_token %}
        用户名：<input type="text" name="username" placeholder="用户名"><br/>
        密码： <input type="password" name="password" placeholder="密码"><br/>
        <input type="submit" id="btnAjax" value="登录">
        <div id="message"></div>
    </form>
    <span style="color:red">{{ msg }}</span>
</div>
</body>
</html>